<template>
  <div>
    <br />
    <div>{{ about }}</div>
    <button @click="about += 1">About加1</button>
    <br />
    <about-son></about-son>
    <br />
    <router-link to="/about/news">News</router-link>
    <router-link to="/about/msg">Msg</router-link>
    <!-- vue3写法 -->
    <!-- <router-view v-slot="{ Component }">
      <keep-alive include="News">
        <component :is="Component"></component>
      </keep-alive>
    </router-view> -->
    <!-- vue2写法 -->
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import AboutSon from "./Aboutson.vue";
export default {
  name: "About",
  data() {
    return {
      about: "About",
    };
  },
  components: {
    AboutSon,
  },
  beforeCreate() {
    console.log("beforeCreate", "about");
  },
  created() {
    console.log("created", "about");
  },
  beforeMount() {
    console.log("beforeMount", "about");
  },
  mounted() {
    console.log("mounted", "about");
  },
  beforeUpdate() {
    console.log("beforeUpdate", "about");
  },
  updated() {
    console.log("updated", "about");
  },
  beforeDestroy() {
    console.log("beforeDestroy", "about");
  },
  destroyed() {
    console.log("destroyed", "about");
  },
};
</script>

<style lang="scss" scoped></style>
